import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { Text, Box, Cylinder, Sphere, Plane } from '@react-three/drei';
import * as THREE from 'three';

interface CleanCafeEnvironmentProps {
  radius?: number;
}

export const CleanCafeEnvironment: React.FC<CleanCafeEnvironmentProps> = ({ 
  radius = 20 
}) => {
  const envRef = useRef<THREE.Group>(null);
  const GROUND_LEVEL = 0; // 统一地面高度

  return (
    <group ref={envRef}>
      {/* Invisible Air Walls - Sphere Boundary */}
      <Sphere args={[radius]} position={[0, 0, 0]}>
        <meshBasicMaterial 
          transparent 
          opacity={0}
          side={THREE.BackSide}
        />
      </Sphere>

      {/* Visual Sky Sphere */}
      <Sphere args={[radius - 0.1]} position={[0, 0, 0]}>
        <meshBasicMaterial 
          color="#E6F3FF"
          side={THREE.BackSide}
          transparent
          opacity={0.8}
        />
      </Sphere>

      {/* Ground - Simple Circle at level 0 */}
      <Cylinder 
        args={[radius - 2, radius - 2, 0.1]} 
        position={[0, GROUND_LEVEL - 0.05, 0]}
        receiveShadow
      >
        <meshStandardMaterial 
          color="#D2B48C" 
          roughness={0.7}
        />
      </Cylinder>

      {/* Central Coffee Building - On ground */}
      <group position={[0, GROUND_LEVEL, 0]}>
        {/* Main Structure */}
        <Box
          position={[0, 3, 0]}
          args={[8, 6, 4]}
          castShadow
          receiveShadow
        >
          <meshStandardMaterial 
            color="#DEB887" 
            roughness={0.8}
          />
        </Box>

        {/* Simple Roof */}
        <Box
          position={[0, 6.5, 0]}
          args={[9, 1, 5]}
          castShadow
        >
          <meshStandardMaterial color="#8B4513" />
        </Box>

        {/* Front Door */}
        <Box
          position={[0, 1.5, 2.1]}
          args={[1.2, 3, 0.1]}
          castShadow
        >
          <meshStandardMaterial color="#654321" />
        </Box>

        {/* Windows */}
        {[-2.5, 2.5].map((x, i) => (
          <Box
            key={i}
            position={[x, 3, 2.1]}
            args={[1.5, 2, 0.05]}
          >
            <meshStandardMaterial 
              color="#87CEEB" 
              transparent 
              opacity={0.6}
            />
          </Box>
        ))}

        {/* Simple Sign */}
        <group position={[0, 7, 2.2]}>
          <Box args={[4, 0.8, 0.1]} castShadow>
            <meshStandardMaterial color="#FFF8DC" />
          </Box>
          <Text
            position={[0, 0, 0.1]}
            fontSize={0.3}
            color="#8B4513"
            anchorX="center"
            anchorY="middle"
          >
            浪漫咖啡厅
          </Text>
        </group>
      </group>

      {/* Organized Seating Areas - On ground level */}
      {[8, 14].map((ringRadius, ringIndex) => {
        const tableCount = ringIndex === 0 ? 6 : 8;
        
        return Array.from({ length: tableCount }, (_, i) => {
          const angle = (i * Math.PI * 2) / tableCount;
          const x = Math.cos(angle) * ringRadius;
          const z = Math.sin(angle) * ringRadius;
          
          return (
            <group key={`table-${ringIndex}-${i}`} position={[x, GROUND_LEVEL, z]}>
              {/* Simple Table - On ground */}
              <Cylinder
                position={[0, 0.4, 0]}
                args={[0.6, 0.6, 0.05]}
                castShadow
                receiveShadow
              >
                <meshStandardMaterial color="#8B4513" />
              </Cylinder>

              {/* Table Base */}
              <Cylinder
                position={[0, 0.2, 0]}
                args={[0.05, 0.05, 0.4]}
                castShadow
              >
                <meshStandardMaterial color="#654321" />
              </Cylinder>

              {/* Two Chairs per Table - On ground */}
              {[0, Math.PI].map((chairAngle, chairIndex) => {
                const chairX = Math.cos(chairAngle) * 1.0;
                const chairZ = Math.sin(chairAngle) * 1.0;
                
                return (
                  <group 
                    key={chairIndex} 
                    position={[chairX, GROUND_LEVEL, chairZ]}
                    rotation={[0, chairAngle + Math.PI, 0]}
                  >
                    {/* Chair Seat */}
                    <Box position={[0, 0.25, 0]} args={[0.3, 0.03, 0.3]} castShadow>
                      <meshStandardMaterial color="#8B4513" />
                    </Box>
                    {/* Chair Back */}
                    <Box position={[0, 0.45, -0.13]} args={[0.3, 0.4, 0.03]} castShadow>
                      <meshStandardMaterial color="#8B4513" />
                    </Box>
                    {/* Chair Legs */}
                    {[[-0.1, -0.1], [0.1, -0.1], [-0.1, 0.1], [0.1, 0.1]].map((legPos, legIndex) => (
                      <Cylinder
                        key={legIndex}
                        position={[legPos[0], 0.125, legPos[1]]}
                        args={[0.015, 0.015, 0.25]}
                        castShadow
                      >
                        <meshStandardMaterial color="#654321" />
                      </Cylinder>
                    ))}
                  </group>
                );
              })}
            </group>
          );
        });
      })}

      {/* Simple Perimeter Plants - ON GROUND */}
      {Array.from({ length: 6 }, (_, i) => {
        const angle = (i * Math.PI * 2) / 6;
        const x = Math.cos(angle) * (radius - 3);
        const z = Math.sin(angle) * (radius - 3);
        
        return (
          <group key={`plant-${i}`} position={[x, GROUND_LEVEL, z]}>
            {/* Pot - ON GROUND */}
            <Cylinder
              position={[0, 0.3, 0]}
              args={[0.3, 0.25, 0.6]}
              castShadow
            >
              <meshStandardMaterial color="#8B4513" />
            </Cylinder>
            {/* Plant */}
            <Sphere
              position={[0, 0.8, 0]}
              args={[0.4]}
              castShadow
            >
              <meshStandardMaterial color="#228B22" />
            </Sphere>
          </group>
        );
      })}

      {/* Lighting */}
      <ambientLight intensity={0.4} />
      <directionalLight 
        position={[10, 15, 5]} 
        intensity={1.0} 
        castShadow
        shadow-mapSize={[1024, 1024]}
      />
      
      {/* Central Point Light */}
      <pointLight 
        position={[0, 10, 0]} 
        intensity={0.6} 
        distance={30}
        color="#FFB6C1" 
      />
    </group>
  );
};